<template>
  <section class="wrapper">
    <section class="title">{{ info.title }}</section>
    <section class="time">
      <img src="../assets/images/time.png" alt="">
      {{ info.createTime | replace }}
    </section>
    <section class="details" v-html="info.content"/>
  </section>
</template>
<script>
import { getNewsDetails } from '@/api/match'

export default {
  name: 'Message',
  data: () => ({
    info: {}
  }),
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getNewsDetails({id: this.$route.params.id}).then(res => {
        this.info = res
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .wrapper {
    background: #fff;
    padding: 0 0.333rem;
  }
  
  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .title {
    font-size: 0.453rem;
    font-weight: bolder;
    color: #000000;
    margin: 0.587rem 0 0.4rem;
    text-align: center;
  }
  
  .time {
    margin-bottom: 0.467rem;
    .flex;
    
    img {
      width: 0.333rem;
      margin-right: 0.107rem;
    }
    
    font-size: 0.32rem;
    color: #999999;
  }
  .details {
    /deep/ img {
      width: 100%
    }
  }
</style>
